<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊搜索匹配案例二</title>

    <style type="text/css">

        .search-box-input {
            height: 40px;
            width: 100%;
            border: 1px solid #429FCA;    box-sizing: border-box;
            padding:0 10px;
        }

        /*数据列表*/
        .search-box-list {
            margin: 0;
            display: none;
            list-style-type: none;
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            max-height:257px;
            overflow: auto;
            z-index: 1000;
            border: 1px solid #c0c0c0;    box-sizing: border-box;
            border-top: none;
            background: white;
            padding: 0;
        }
        .search-box-item {
            border-bottom: 1px dotted #f3f3f3;
            padding: 2px 5px;
            cursor: pointer;
        }
        .search-box-item:last-child{
            border-bottom:0px;
        }
        .search-box-item:hover{
            background-color: #eee;
        }
        .search-box {
            position: relative;
            width: 300px;
        }
    </style>
</head>
<body>
<h2>模糊搜索匹配案例二</h2>
<p>使用ul+li标签实现，解决datalist不兼容其他浏览器的问题</p>
<div class="search-box">
    <input id="myTitle" class="search-box-input" placeholder="输入搜索的值"/>
    <span></span>
    <ul id="titles" class="search-box-list">
        <li class="search-box-item" >无匹配结果</li>
    </ul>
</div>


<script type="text/javascript" src="__STATIC__/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {

        //按下文本框时显示
        $(".search-box-input").on("click touch", function () {

            $(".search-box-list").toggle();
        });
        //当输入值得时候事件处理
        $(".search-box-input").on("input propertychange", function () {
            $(".search-box-list").show();
            $key = $(this).val();
            //查询标题根据key
            searchTitles($key);
        });


            //当选中某条记录时，获取到值并给文本框
        $(document).on("click",".search-box-item", function () {
            var sValue = $(this).html();
            $("#myTitle").val(sValue);
            $(".search-box-list").hide();
        });

        function searchTitles($keys) {
            var configObj = {
                method: "POST",   //数据的提交方式：get和post
                url: "{:Url('Index/search')}",  //数据的提交路劲
                async: "true",   //是否支持异步刷新，默认是true
                data: {"key": $keys},//需要提交的数据
                dataType: "json",   //服务器返回数据的类型，例如xml,String,Json等
                success: function (data) {
                    if(data.code==1){
                        HTMLList(data.message);
                    }else{
                        $(".search-box-list").html(data.message);
                    }

                },    //请求成功后的回调函数
                error: function () {
                    alert("获取数据异常");
                },   //请求失败后的回调函数
            }

            $.ajax(configObj);//通过$.ajax函数进行调用。
        }


        function HTMLList(data) {
            var html = "";
            for (var i = 0; i < data.length; i++) {
                html += "<li class='search-box-item' >" + data[i]['title'] + "</li>";
            }
            $(".search-box-list").html(html);
        }

    });
</script>
</body>
</html></title>
</head>
<body>

</body>
</html>